<template>
    <!-- 居中 -->
    <div class="top-content">
        <van-row type="flex" justify="space-around">
            <van-col span="4" class="four-item" @click="topClick(5)">
                <van-image width="50px" height="50px" src="/images/wx.png"/>
                <p class="des">微信红包</p>
            </van-col>
            <van-col span="4" class="four-item" style="padding: 4px;" @click="topClick(6)">
                <van-image width="46px"  height="46px" src="/images/alipay.png"/>
                <p class="des">支付宝</p>
            </van-col>
            <van-col span="4" class="four-item">
                <van-image width="50px"  height="50px" src="/images/gift.png"/>
                <p class="des">推荐有礼</p>
            </van-col>
            <van-col span="4" class="four-item">
                <van-image width="50px"  height="50px" src="/images/about.png"/>
                <p class="des">联系我们</p>
            </van-col>
        </van-row>
        <div class="middle-act">
            <van-image src="/images/middle.png"/>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Col, Row } from 'vant';
    import { Image } from 'vant';

    Vue.use(Image);
    Vue.use(Col);
    Vue.use(Row);
    export default {
        methods: {
            topClick: function (categoryId) {
                this.$router.push({name: 'search_page', params: {'name': categoryId}})
            }
        }
    }
</script>

<style scoped>
    .top-content{
        padding: 1rem 0.5rem;
    }
    .four-item{
        text-align: center;
    }
    .des{
        font-size: 12px;
        font-weight: bold;
        color: gray;
        margin-top: 2px;
    }
    .middle-act{
        margin-top: 15px;
    }
</style>
